<template>
  <div class="network">
    <div class="error-wrapper" v-if="error">
      <img src="@/assets/images/common/Wifi-Error.png" alt="" class="error" />
      <p>网络异常，检查网络再试试</p>
      <button @click="init()">点击重试</button>
    </div>
    <slot v-else></slot>
  </div>
</template>

<script>
export default {
  name: "network",
  props: {
    request: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      error: false
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.error = false;
      this.request()
        .then(res => {
          this.error = false;
        })
        .catch(res => {
          this.error = true;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.network {
  width: 100%;
  height: 100%;
  position: relative;
  .error-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img.error {
      width: 30%;
      max-width: 300px;
    }
    p {
      font-size: 0.13rem;
      color: #8a8a8a;
      font-weight: 500;
      margin-top: 0.15rem;
    }
    button {
      $color: #3a9bde;
      font-size: 0.14rem;
      margin-top: 0.15rem;
      color: $color;
      letter-spacing: 0.02rem;
      padding: 5px 0.3rem;
      border-radius: 5px;
      font-weight: 500;
      border: 1px solid #{$color};
    }
  }
}
</style>
